<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-form">
    <div class="layui-inline" style="margin-top: 10px;margin-left: 30px">
        班级编号：
        <div class="layui-inline">
            <input class="layui-input" name="classid" id="classid" autocomplete="off">
        </div>
    </div>

    <button class="layui-btn" type="button" id="selBtn" style="margin-top: 10px">开始点名</button>
</div>
<table class="layui-hide" id="demo1" lay-filter="test"></table>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'jquery', 'form'], function() {
        var laydate = layui.laydate ,//日期
            laypage = layui.laypage, //分页
            layer = layui.layer, //弹层
            table = layui.table, //表格
            carousel = layui.carousel, //轮播
            upload = layui.upload, //上传
            element = layui.element, //元素操作
            slider = layui.slider,//滑块
            form = layui.form;
        //执行一个 table 实例
        table.render({
            elem: '#demo1'
            ,height: 550
            ,url: '/tchSelStu' //数据接口
            ,title: '随机点名'
            ,cols: [
                [ //表头
                    {field: 'classid', title: '班级编号'},
                    {field: 'stuid', title: '学生编号'},
                    {field: 'sname', title: '学生姓名'}

                ]
            ]
            , page: true
            , even: true
            , id: 'tchSelStu'
        });

        //  按编号随机点名
        var $ = layui.$;
        $('#selBtn').on('click', function(){
            //获取输入框
            var classid = $('#classid');
            //执行重载
            table.reload('tchSelStu', {
                page: {
                    curr: 1 //重新从第 1 页开始selStuName
                }
                ,where: {
                    classid: classid.val()
                }
            });
        });

    });
</script>
</body>
</html>